<template>
  <div id="play-list-detail" v-loading.lock="loading">
    <div class="top-box">
      <div class="cover">
        <img v-lazy="detail.coverImgUrl" alt="cover" />
      </div>
      <div class="info">
        <div class="title">{{ detail.name }}</div>
        <div class="upload-info">
          <div class="user-avatar">
            <img v-lazy="detail.creator.avatarUrl" alt="avatar" />
          </div>
          <div class="username">{{ detail.creator.nickname }}</div>
          <div class="created-time">
            {{ detail.updateTime | formatDate("yyyy-MM-dd") }}创建
          </div>
        </div>
        <div class="operation">
          <div class="play-all">
            <i class="iconfont icon-playfill"></i>播放全部
          </div>
          <div><i class="icon-collection iconfont"></i>收藏</div>
          <div><i class="icon-share iconfont"></i>分享</div>
        </div>
        <div class="detail-info">
          <div class="tags">标签：{{ detail.tags | filterTags }}</div>
          <div class="count-box">
            <div class="song-count">歌曲：{{ detail.trackCount }}</div>
            <div class="play-count">
              播放：{{ detail.playCount | filterCount }}
            </div>
          </div>
          <div class="desc">简介：{{ detail.description }}</div>
        </div>
      </div>
    </div>
    <div class="playlist">
      <div class="tabbar">
        <div class="active">歌曲列表</div>
        <div>评论</div>
        <div>收藏者</div>
      </div>
      <template>
        <el-table
          @row-dblclick="clickMusic"
          size="small"
          :data="musicListTableData"
          stripe
          style="width: 100%"
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="artist" label="歌手"> </el-table-column>
          <el-table-column prop="album" label="专辑"> </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "PlaylistDetail",
  computed: {
    ...mapState({
      detail: (state) => state.playlistDetail.playlistDetail,
      controller: (store) => store.controller.controller,
      loading: (state) => state.playlistDetail.loading,
    }),
    ...mapGetters(["musicListTableData"]),
  },
  mounted() {
    this.$store.dispatch("playlistDetail", this.$route.params.id);
  },
  methods: {
    // 双击播放音乐
    clickMusic(row) {
      let id = row.id;
      this.$store.dispatch("appendAll", {
        list: this.detail.musicList.songs,
        id,
      });
    },

  },
  filters: {
    filterTags(data) {
      if (data.length < 2) {
        return data[0];
      } else {
        let tags = data[0];
        data.forEach((item) => {
          tags += "/ " + item;
        });
        return tags;
      }
    },
  },
};
</script>

<style lang='less'>
@media screen and (max-width: 2200px) {
  #play-list-detail {
    width: 1100px;
  }
}

@media screen and (max-width: 1438px) {
  #play-list-detail {
    width: 800px;
  }
}
#play-list-detail {
  margin: 0 auto;
  .top-box {
    display: flex;
    .cover {
      width: 150px;
      img {
        width: 100%;
        border-radius: 10px;
      }
    }
    .info {
      width: 80%;
      margin-left: 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .title {
        font-size: 20px;
        font-weight: bolder;
      }
      .upload-info {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #666;
        .user-avatar {
          width: 20px;
          img {
            border-radius: 50%;
            width: 100%;
          }
        }
        .username {
          margin-left: 10px;
        }
        .created-time {
          margin-left: 10px;
        }
      }
      .operation {
        display: flex;
        div {
          margin-right: 10px;
          border: 1px solid #eee;
          color: #666;
          padding: 2px 10px;
          border-radius: 30px;
          font-size: 12px;
          i {
            margin-right: 5px;
          }
        }
        .play-all {
          color: #fff;
          background: var(--themeColor1);
          border: 0;
        }
      }
      .detail-info {
        font-size: 12px;
        color: #666;
        .count-box {
          display: flex;
          .play-count {
            margin-left: 10px;
          }
        }
        .desc {
          display: -webkit-box; /**对象作为伸缩盒子模型展示**/
          -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
          -webkit-line-clamp: 1; /**显示的行数**/
          overflow: hidden; /**隐藏超出的内容**/
        }
      }
    }
  }
  .playlist {
    margin-top: 20px;
    .tabbar {
      display: flex;
      align-items: center;
      div {
        margin-right: 20px;
        font-size: 18px;
        padding-bottom: 2px;
      }
      .active {
        font-weight: bold;
        font-size: 20px;
        border-bottom: 3px solid var(--themeColor1);
      }
    }
  }
}
</style>